<script>
import {mix1} from "@/mixin";
import {mix2} from "@/mixin";
import {mix3} from "@/mixin";

export default {
  name: "User",
  //对于mounted  不管是当前页面的mounted还是mixin混入的  都会执行 mounted方法
  //先会执行  mixin混入的 mounted   然后再执行 当前页面的mounted

  //对于官方文文档说的
  /**
   * 通过测试得知:对于声明周期的钩子函数来说,都有的话,采用叠加,先执行混入的,再执行自己的
   * 以上的混入属于局部混入,只混入到指定的组件当中
   */

  mounted() {
    console.log('User mounted...')

  },
  data(){
    return {
      msg : '用户信息',
      name : '张三2',
      age : 20
    }
  },
  // mixins : [mix1 , mix2 , mix3]
}
</script>

<template>
<div class="s active_color">
  <h1>{{msg}}</h1>
  <h3>姓名:{{name}}</h3>
  <h3>年龄:{{age}}</h3>
  <button @click="printInfo">打印用户信息</button>
</div>
</template>

<style scoped>
.s{
  background-color: antiquewhite;
}
</style>